{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点门票 - 湘行旅游网</title>

    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入特色字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色 - 湘西特色色调 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513', // 木质建筑棕
                        secondary: '#9E2A2B', // 苗族服饰红
                        accent: '#1A3A59', // 蜡染蓝
                        river: '#2F4F4F', // 沱江青绿色
                        wood: '#D2B48C', // 木色
                        light: '#F5F1E9', // 米白色底
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                        masha: ['"Ma Shan Zheng"', 'cursive'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .nav-active {
                @apply bg-primary text-white border-l-4 border-secondary;
            }
            .logo-img {
                width: 28px;
                height: 28px;
                object-fit: contain;
            }
            . Miao-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.342 1.9 3.912V26c0 2.21-1.79 4-4 4s-4-1.79-4-4v-1.226c0-1.57.66-2.996 1.9-3.912.168-.125.531.01.888.14h3.864zM82.5 10.5c.818-1.17.878-2.764.159-4.049-.72-.127-1.457.02-2.066.529-.608.51-1.024 1.271-1.024 2.071 0 .625.264 1.197.68 1.643.415.445.986.69 1.59.777.605.086 1.17-.087 1.661-.571zM73.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.342 1.9 3.912V26c0 2.21-1.79 4-4 4s-4-1.79-4-4v-1.226c0-1.57.66-2.996 1.9-3.912.168-.125.531.01.888.14h3.864zM33.5 10.5c.818-1.17.878-2.764.159-4.049-.72-.127-1.457.02-2.066.529-.608.51-1.024 1.271-1.024 2.071 0 .625.264 1.197.68 1.643.415.445.986.69 1.59.777.605.086 1.17-.087 1.661-.571zM63.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.342 1.9 3.912V26c0 2.21-1.79 4-4 4s-4-1.79-4-4v-1.226c0-1.57.66-2.996 1.9-3.912.168-.125.531.01.888.14h3.864zM43.5 10.5c.818-1.17.878-2.764.159-4.049-.72-.127-1.457.02-2.066.529-.608.51-1.024 1.271-1.024 2.071 0 .625.264 1.197.68 1.643.415.445.986.69 1.59.777.605.086 1.17-.087 1.661-.571zM53.184 20c.357-.13.72-.264.888-.14 1.24.916 1.9 2.342 1.9 3.912V26c极 2.21-1.79 4-4 4s-4-1.79-4-4v-1.226c0-1.57.66-2.996 1.9-3.912.168-.125.531.01.888.极 h3.864zM23.5 10.5c.818-1.17.878-2.764.159-4.049-.72-.127-1.457.02-2.066.529-.608.51-1.024 1.271-1.024 2.071 0 .625.264 1.197.68 1.643.415.445.986.69 1.59.777.605.086 1.17-.087 1.661-.571zM13.184 20c极 357-.13.72-.264.888-.14 1.24.916 1.9 2.342 1.9 3.912V26c0 2.21-1.79 4-4 4s-4-1.79-4-4v-1.226c0-1.57.66-2.996 1.9-3.912.168-.125.531.01.888.14h3.864zM93.5 10.5c.818-1.17.878-2.764.159-4.049-.72-.127-1.457.02-2.066.529-.608.51-1.024 1.271-1.024 2.071 0 .625.264 1.197.68 1.643.415.445.986.69 1.59.777.605.086 1.17-.087 1.661-.571z' fill='%23d2b48c' fill-opacity='0.3' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
    <style>
    :root {
        --primary-brown: #8B4513; /* 木质建筑棕 */
        --primary-green: #2F4F4F; /* 沱江青绿色 */
        --accent-red: #9E2A2B; /* 苗族服饰红 */
        --accent-blue: #1A3A59; /* 蜡染蓝 */
        --light-bg: #F5F1E9; /* 米白色底 */
        --wood-tone: #D2B48C; /* 木色边框 */
    }

    /* 苗族花纹分隔线 */
    .sub-header{
        height: 70px;
        background-image: url("{% static 'img/border-pattern.png' %}"); /* 苗族织锦边框 */
        background-repeat: repeat-x;
        background-position: bottom;
        background-size: 120px 8px;
        background-color: white;
        box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
    }
    .container{
        width: 1128px;
        margin: 0 auto;
    }
    .sub-header .logo{
        width: 234px;
        height: 70px;
        float: left;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .sub-header .logo a{
        color: var(--primary-brown);
        text-decoration: none;
    }
    .sub-header .menu-list{
        float: left;
        height: 70px;
        line-height: 70px;
    }
    .sub-header .menu-list a{
        display: inline-block;
        padding: 0 15px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
        position: relative;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    .sub-header .menu-list a::after {
        content: "";
        position: absolute;
        bottom: 20px;
        left: 15px;
        width: 0;
        height: 2px;
        background-color: var(--accent-red);
        transition: width 0.3s;
    }
    .sub-header .menu-list a:hover{
        color: var(--accent-red);
        transform: translateY(-2px);
    }
    .sub-header .menu-list a:hover::after {
        width: calc(100% - 30px);
    }
    .sub-header .menu-list a.active {
        color: var(--accent-red);
    }
    .sub-header .menu-list a.active::after {
        width: calc(100% - 30px);
    }
    .sub-header .logon{
        float: right;
        height: 70px;
        line-height: 70px;
    }
    .sub-header .logon a{
        display: inline-block;
        padding: 0 10px;
        color: var(--primary-brown);
        font-size: 16px;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .sub-header .logon a:hover{
        color: var(--accent-red);
    }
    .sub-header .name{
        color: var(--primary-brown);
        font-size: 28px;
        font-family: "Ma Shan Zheng", cursive;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }

    /* 湘西特色装饰元素 */
    .decorative-element {
        position: relative;
    }
    .decorative-element::before,
    .decorative-element::after {
        content: "❦";
        color: var(--accent-red);
        opacity: 0.7;
        font-size: 14px;
    }

    /* 木质卡片效果 */
    .wooden-card {
        border: 1px solid var(--wood-tone);
        box-shadow: 0 4px 6px -1px rgba(139, 69, 19, 0.1), 0 2px 4px -1px rgba(139, 69, 19, 0.06);
        transition: all 0.3s ease;
    }
    .wooden极:hover {
        box-shadow: 0 10px 15px -3px rgba(139, 69, 19, 0.15), 0 4px 6px -2px rgba(139, 69, 19, 0.1);
        transform: translateY(-5px);
    }

    /* 蜡染风格按钮 */
    .batik-btn {
        background-color: var(--accent-blue);
        color: white;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4极4h2v-4h4v-2h-4zm0-30V0h-2极4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3极/svg%3E");
        transition: all 0.3s ease;
    }
    .batik-btn:hover {
        background-color: #142d46;
        transform: scale(1.05);
    }

    /* 价格标签样式 */
    .price-tag {
        position: relative;
        display: inline-block;
        padding: 2px 10px;
        background-color: var(--accent-red);
        color: white;
        border-radius: 4px;
    }
    .price-tag::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 6px solid var(--accent-red);
    }

    /* 内容区域显示/隐藏控制 */
    .content-section {
        display: none;
    }
    .content-section.active {
        display: block;
    }

    /* 用户菜单样式 - 新增 */
    .user-menu-container {
        position: relative;
        display: inline-block;
        margin-left: 10px;
        height: 70px;
        display: inline-flex;
        align-items: center;
    }
    .user-menu-trigger {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        padding: 0 10px;
        color: var(--primary-brown);
        text-decoration: none;
        height: 100%;
    }
    .user-menu-trigger:hover {
        color: var(--accent-red);
    }
    .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #ddd;
        display: inline-block;
        vertical-align: middle;
        background-size: cover;
        background-position: center;
        border: 2px solid var(--wood-tone);
        box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.3);
    }
    .user-dropdown-menu {
        position: absolute;
        top: 100%;
        min-width: 180px;
        right: 0;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        padding: 2px 0;
        margin: 0;
        list-style: none;
        z-index: 1000;
        display: none;
        border: 1px solid var(--wood-tone);
    }
    .user-dropdown-menu.active {
        display: block;
    }
    .user-dropdown-menu li {
        margin: 0;
        padding: 0;
    }
    .user-dropdown-menu a {
        display: block;
        padding: 3px 12px;
        color: var(--primary-brown);
        text-decoration: none;
        white-space: nowrap;
        font-size: 14px;
    }
    .user-dropdown-menu a:hover {
        background-color: var(--light-bg);
        color: var(--accent-red);
    }
    .user-dropdown-menu .divider {
        height: 1px;
        margin: 2px 0;
        background-color: var(--wood-tone);
    }
    .user-dropdown-menu .logout {
        color: #dc3545;
        padding: 2px 12px;
        font-size: 13px;
    }
    .user-dropdown-menu .logout:hover {
        background-color: #f8d7da;
        color: #721c24;
    }
</style>
</head>
<body class="bg-light font-inter text-primary-brown Miao-pattern">
    <!-- 顶部导航栏 -->
<header class="sub-header clearfix">
    <div class="container">
        <div class="logo">
            <a href="/search/">
                <a>

        <!-- 替换后的吊脚楼图标 -->
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>
                </a>
                <span class="name">湘行</span>
            </a>
        </div>
        <div class="menu-list">
            <a href="/search/">首页</a>
            <a href="/user/strategy/">攻略笔记</a>
            <a href="{% url 'scenery' %}" class="active">景点门票</a>
            <a href="/travel/group/">旅游团</a>
            <a href="{% url 'house' %}">酒店/民宿</a>
            <a href="{% url 'travel' %}">出行</a>
            <a href="{% url 'itinerary' %}">我的行程</a>
        </div>
        <div class="logon">
            <!-- 使用Django模板条件判断用户登录状态 -->
            {% if user.is_authenticated %}
                <!-- 用户已登录时显示用户菜单 -->
                <a href="/user/message/reminder" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
                <div class="user-menu-container">
                    <a class="user-menu-trigger">
                        <span class="user-avatar" style="background-image: url('{% static 'img/4.jpg' %}');"></span>
                        <span>{{ user.username }}</span>
                    </a>
                    <ul class="user-dropdown-menu">
                        <li><a href="/user/profile/">个人中心</a></li>
                        <li><a href="/user/collections/">我的收藏</a></li>
                        <li><a href="/itinerary/">我的行程</a></li>
                        <li><a href="/user/settings/">设置</a></li>
                        <li class="divider"></li>
                        <li><a href="/user/logout/" class="logout">退出登录</a></li>
                    </ul>
                </div>
            {% else %}
                <!-- 用户未登录时显示登录注册按钮 -->
                <a href="/user/login/">登录</a>
                <a href="/register/">注册</a>
                <a href="/user/message/reminder/" class="relative">
                    <i class="fa fa-bell-o"></i>
                </a>
            {% endif %}
        </div>
    </div>
</header>

        <!-- 页面标题区 -->
    <div class="bg-primary-green py-12 mt-2 relative overflow-hidden">
        <div class="container mx-auto px-4 relative z-10">
            <!-- 标题文字颜色改为 #8B4513（木质建筑棕 ，更清晰突出） -->
            <h1 class="text-[clamp(1.8rem,4vw,2.8rem)] font-masha text-center mb-3 text-[#8B4513]">湘西美景 · 等您探寻</h1>
            <!-- 描述文字颜色改为 #1A3A59（蜡染蓝 ，和背景有对比更清晰） -->
            <p class="text-center max-w-2xl mx-auto text-[#1A3A59]">
                漫步凤凰古城，攀登天门险峰，感受湘西独特的自然风光与民族文化
            </p>
        </div>
        <!-- 装饰图案 -->
        <div class="absolute top-0 left-0 w-24 h-full opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'52\' height=\'26\' viewBox=\'0 0 52 26\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z\' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
        <div class="absolute top-0 right-0 w-24 h-full opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=\'52\' height=\'26\' viewBox=\'0 0 52 26\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z\' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 左侧分类导航 -->
            <aside class="lg:w-64 shrink-0">
                <div class="bg-white rounded-lg overflow-hidden wooden-card">
                    <nav class="divide-y divide-wood/30">
                        <a href="#" class="category-link flex items-center px-6 py-4 nav-active" data-category="popular">
                            <span>热门景点</span>
                            <span class="ml-2 text-xs bg-white text-primary px-2 py-0.5 rounded-full">默认</span>
                        </a>
                        <a href="#" class="category-link flex items-center px-6 py-4 text-neutral-600 hover:bg-light transition-colors" data-category="discount">
                            <span>门票特价</span>
                        </a>
                        <a href="#" class="category-link flex items-center px-6 py-4 text-neutral-600 hover:bg-light transition-colors" data-category="recommended">
                            <span>推荐景点</span>
                        </a>
                        <a href="#" class="category-link flex items-center px-6 py-4 text-neutral-600 hover:bg-light transition-colors" data-category="all">
                            <span>全部景点</span>
                        </a>
                    </nav>

                    <!-- 筛选器 -->
                    <div class="p-6 border-t border-wood/30">
                        <h3 class="font-medium text-primary mb-4 decorative-element text-center">景点筛选</h3>

                        <div class="space-y-4">
                            <!-- 价格范围 -->
                            <div>
                                <label class="block text-sm text-primary mb-2">价格范围</label>
                                <select class="w-full px-3 py-2 border border-wood rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary bg-light/50">
                                    <option>全部价格</option>
                                    <option>0-100元</option>
                                    <option>100-200元</option>
                                    <option>200-500元</option>
                                    <option>500元以上</option>
                                </select>
                            </div>

                            <!-- 景点类型 -->
                            <div>
                                <label class="block text-sm text-primary mb-2">景点类型</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">自然风光</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">历史古迹</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">民族村寨</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">文化体验</span>
                                    </label>
                                </div>
                            </div>

                            <!-- 地区筛选 -->
                            <div>
                                <label class="block text-sm text-primary mb-2">地区</label>
                                <div class="space-y-2">
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">张家界</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">怀化</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">湘西州</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="checkbox" class="rounded text-secondary focus:ring-secondary border-wood">
                                        <span class="ml-2 text-sm">长沙</span>
                                    </label>
                                </div>
                            </div>

                            <!-- 筛选按钮 -->
                            <button class="w-full batik-btn py-2 rounded-md hover:bg-accent transition-colors">
                                应用筛选
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 湘西特色广告 -->
                <div class="mt-6 rounded-lg overflow-hidden wooden-card">
                    <img src="https://picsum.photos/seed/xiangxi/600/400" alt="湘西风情" class="w-full h-48 object-cover">
                    <div class="p-4 bg-white">
                        <h4 class="font-masha text-lg text-primary text-center mb-2">湘西风情体验</h4>
                        <p class="text-sm text-primary/80 text-center">感受苗族文化，体验湘西魅力</p>
                        <button class="mt-3 w-full py-2 text-sm border border-secondary text-secondary rounded hover:bg-secondary/10 transition-colors">
                            了解更多
                        </button>
                    </div>
                </div>
            </aside>

            <!-- 右侧景点列表 -->
            <div class="flex-1">
                <!-- 热门景点内容区 -->
                <div class="content-section active" id="popular-content">
                    <!-- 景点项目1 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <!-- 景点图片 -->
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/zhangjiajie/800/600" alt="张家界天门山" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-secondary text-white text-xs px-2 py-1 rounded-md">热门</span>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <span class="text-white text-sm"><i class="fa fa-camera mr-1"></i> 360°全景游览</span>
                                </div>
                            </div>

                            <!-- 景点信息 -->
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">张家界天门山国家森林公园</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="ml-1 text-primary/80">4.7</span>
                                    </div>
                                </div>

                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    天门山是张家界海拔最高的山，距城区仅8公里，因自然奇观天门洞而得名。天门洞终年氤氲蒸腾，景象变幻莫测，似蕴藏天地无穷玄机，被视为"天界之门"，也是世界罕见的高海拔天然穿山溶洞。
                                </p>

                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>张家界市永定区</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>08:00-18:00</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>自然风光</span>
                                    </div>
                                </div>

                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥258</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥278</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 景点项目2 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <!-- 景点图片 -->
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/fenghuang/800/600" alt="凤凰古城" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <span class="text-white text-sm"><i class="fa fa-video-camera mr-1"></i> 夜景特别推荐</span>
                                </div>
                            </div>

                            <!-- 景点信息 -->
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">凤凰古城</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">4.2</span>
                                    </div>
                                </div>

                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    凤凰古城是国家历史文化名城，曾被新西兰著名作家路易·艾黎称赞为中国最美丽的小城。城内的青石板街道、江边木结构吊脚楼、众多古建筑，以及浓厚的苗族风情，构成了凤凰独具一格的味道。
                                </p>

                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>湘西州凤凰县</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>全天开放</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>历史古迹</span>
                                    </div>
                                </div>

                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥148</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥168</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 景点项目3 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <!-- 景点图片 -->
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/furong/800/600" alt="芙蓉镇" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-river text-white text-xs px-2 py-1 rounded-md">文化体验</span>
                            </div>

                            <!-- 景点信息 -->
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">芙蓉镇</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">4.3</span>
                                    </div>
                                </div>

                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    芙蓉镇本名王村，是一个拥有两千多年历史的古镇，因宏伟瀑布穿梭其中，又称"挂在瀑布上的千年古镇"。这里有保存完好的青石板路，临水而建的吊脚木楼，处处透露着古朴的韵味。
                                </p>

                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>湘西州永顺县</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>07:30-22:00</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>民族村寨</span>
                                    </div>
                                </div>

                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥108</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥120</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 门票特价内容区 -->
                <div class="content-section" id="discount-content">
                    <!-- 特价景点1 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/huanglong/800/600" alt="黄龙洞" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-secondary text-white text-xs px-2 py-1 rounded-md">特价</span>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <span class="text-white text-sm"><i class="fa fa-percent mr-1"></i> 限时7折</span>
                                </div>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">黄龙洞</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">4.5</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    黄龙洞以其庞大的立体结构洞穴空间、丰富的溶洞景观、水陆兼备的游览观光线路独步天下，内有龙宫、水晶宫等著名景点，是张家界的必游景点之一。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>张家界市武陵源区</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>08:00-17:30</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>自然奇观</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥88</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥125</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 特价景点2 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/dehang/800/600" alt="德夯苗寨" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-secondary text-white text-xs px-2 py-1 rounded-md">特价</span>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <span class="text-white text-sm"><i class="fa fa-percent mr-1"></i> 限时6折</span>
                                </div>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">德夯苗寨</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">3.8</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    德夯苗寨是湖南省唯一集自然山水风光、苗族风情为一体的国家重点风景名胜区，这里山势跌宕，绝壁高耸，峰林重叠，形成了许多断崖、石壁、瀑布、原始森林。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>湘西州吉首市</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>08:30-17:30</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>民族村寨</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥59</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥98</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推荐景点内容区 -->
                <div class="content-section" id="recommended-content">
                    <!-- 推荐景点1 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/fenghuangshan/800/600" alt="南华山国家森林公园" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-accent text-white text-xs px-2 py-1 rounded-md">推荐</span>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">南华山国家森林公园</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <span class="ml-1 text-primary/80">4.9</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    南华山国家森林公园紧邻凤凰古城，园内林木青翠，风光旖旎，是凤凰古城天然的绿色屏障。登顶可俯瞰整个凤凰古城全景，是摄影爱好者的天堂。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>湘西州凤凰县</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>08:00-18:00</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>自然风光</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥78</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 推荐景点2 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/zhangjiajieglass/800/600" alt="张家界大峡谷玻璃桥" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-accent text-white text-xs px-2 py-1 rounded-md">推荐</span>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">张家界大峡谷玻璃桥</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="ml-1 text-primary/80">4.7</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    张家界大峡谷玻璃桥是世界最高、跨度最长的玻璃桥，大桥建在大峡谷两侧的峰顶上，横跨大峡谷，桥面全部采用透明玻璃铺设，桥中心有全球最高的蹦极台。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>张家界市慈利县</span>
                                    </div>
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-clock-o text-secondary mr-1"></i>
                                        <span>07:30-16:00</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>现代景观</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥219</span>
                                        <span class="text-primary/80 text-sm ml-1">/人</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 全部景点内容区 -->
                <div class="content-section" id="all-content">
                    <!-- 全部景点包含前面所有景点 -->
                    <!-- 这里只显示部分作为示例，实际应用中可以包含所有景点 -->
                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/zhangjiajie/800/600" alt="张家界天门山" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-secondary text-white text-xs px-2 py-1 rounded-md">热门</span>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">张家界天门山国家森林公园</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="ml-1 text-primary/80">4.7</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    天门山是张家界海拔最高的山，距城区仅8公里，因自然奇观天门洞而得名。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>张家界市永定区</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>自然风光</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥258</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥278</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/fenghuang/800/600" alt="凤凰古城" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">凤凰古城</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">4.2</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    凤凰古城是国家历史文化名城，曾被新西兰著名作家路易·艾黎称赞为中国最美丽的小城。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>湘西州凤凰县</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>历史古迹</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥148</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥168</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg overflow-hidden mb-6 wooden-card">
                        <div class="flex flex-col md:flex-row">
                            <div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
                                <img src="https://picsum.photos/seed/huanglong/800/600" alt="黄龙洞" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                <span class="absolute top-4 left-4 bg-secondary text-white text-xs px-2 py-1 rounded-md">特价</span>
                            </div>
                            <div class="md:w-1/2 p-6">
                                <div class="flex justify-between items-start mb-3">
                                    <h3 class="text-xl font-bold text-primary">黄龙洞</h3>
                                    <div class="flex items-center text-yellow-500 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="ml-1 text-primary/80">4.5</span>
                                    </div>
                                </div>
                                <p class="text-primary/80 text-sm mb-4 line-clamp-3">
                                    黄龙洞以其庞大的立体结构洞穴空间、丰富的溶洞景观、水陆兼备的游览观光线路独步天下。
                                </p>
                                <div class="flex flex-wrap items-center text-sm text-primary/80 mb-6 gap-y-2">
                                    <div class="flex items-center mr-4">
                                        <i class="fa fa-map-marker text-secondary mr-1"></i>
                                        <span>张家界市武陵源区</span>
                                    </div>
                                    <div class="flex items-center">
                                        <i class="fa fa-tag text-secondary mr-1"></i>
                                        <span>自然奇观</span>
                                    </div>
                                </div>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="price-tag text-lg font-bold">¥88</span>
                                        <span class="text-primary/60 text-sm line-through ml-6">¥125</span>
                                    </div>
                                    <button class="batik-btn px-4 py-2 rounded-md">
                                        立即预订
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <div class="flex justify-center mt-8">
                    <nav class="inline-flex rounded-md shadow-sm" aria-label="分页">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-wood bg-white text-sm font-medium text-primary hover:bg-light transition-colors">
                            <i class="fa fa-chevron-left text-xs"></i>
                            <span class="sr-only">上一页</span>
                        </a>
                        <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-primary bg-primary text-sm font-medium text-white">
                            1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-wood bg-white text-sm font-medium text-primary hover:bg-light transition-colors">
                            2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-wood bg-white text-sm font-medium text-primary hover:bg-light transition-colors">
                            3
                        </a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-wood bg-white text-sm font-medium text-primary">
                            ...
                        </span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-wood bg-white text-sm font-medium text-primary hover:bg-light transition-colors">
                            8
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-wood bg-white text-sm font-medium text-primary hover:bg-light transition-colors">
                            <i class="fa fa-chevron-right text-xs"></i>
                            <span class="sr-only">下一页</span>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-primary text-white mt-16">
        <div class="container mx-auto px-4 py-10">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <!-- 页脚Logo -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
                            <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
                        </svg>
                        <span class="text-lg font-masha text-white">湘行</span>
                    </div>
                    <p class="text-white/80 text-sm mb-4">
                        专注湖南旅游服务，为您提供高品质的旅行体验，带您领略湘西独特的自然风光与民族文化。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-white/70 hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-white/70 hover:text-white transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-white/70 hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="font-medium text-white mb-4 border-b border-white/20 pb-2">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">联系方式</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">旅游攻略</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-medium text-white mb-4 border-b border-white/20 pb-2">服务支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">预订说明</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">退改政策</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">支付方式</a></li>
                        <li><a href="#" class="text-white/80 hover:text-white transition-colors">用户协议</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="font-medium text-white mb-4 border-b border-white/20 pb-2">联系我们</h3>
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-phone text-white/80 mt-1 mr-3"></i>
                            <span class="text-white/80">400-123-4567</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-envelope text-white/80 mt-1 mr-3"></i>
                            <span class="text-white/80">service@xiangxing.com</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-white/80 mt-1 mr-3"></i>
                            <span class="text-white/80">湖南省长沙市芙蓉区解放西路188号</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-white/20 mt-8 pt-6 text-center text-sm text-white/70">
                <p>© 2023 湘行旅游网 版权所有 | 湘ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <script>
         // 处理图片加载失败的情况
        document.querySelectorAll('img').forEach(img => {
            img.addEventListener('error', function() {
                // 如果logo图片加载失败，显示备用图标
                if(this.alt.includes('logo')) {
                    this.src = 'https://picsum.photos/seed/defaultlogo/28/28';
                    this.alt = '默认logo';
                } else {
                    this.src = 'https://picsum.photos/seed/fallback/800/600';
                    this.alt = '景点图片';
                }
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
            } else {
                header.classList.remove('shadow-md');
            }
        });

        // 为景点卡片添加进入动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.wooden-card');

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });

            cards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
                observer.observe(card);
            });

            // 分类切换功能
            const categoryLinks = document.querySelectorAll('.category-link');

            categoryLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();

                    // 移除所有链接的active类
                    categoryLinks.forEach(item => {
                        item.classList.remove('nav-active');
                        item.classList.add('text-neutral-600', 'hover:bg-light', 'transition-colors');
                    });

                    // 给当前点击的链接添加active类
                    this.classList.add('nav-active');
                    this.classList.remove('text-neutral-600', 'hover:bg-light', 'transition-colors');

                    // 获取要显示的内容区域
                    const category = this.getAttribute('data-category');

                    // 隐藏所有内容区域
                    document.querySelectorAll('.content-section').forEach(section => {
                        section.classList.remove('active');
                    });

                    // 显示对应的内容区域
                    document.getElementById(`${category}-content`).classList.add('active');

                    // 滚动到内容顶部
                    document.querySelector('.flex-1').scrollTop = 0;
                });
            });

            // 用户菜单功能实现 - 新增
            const userMenuTriggers = document.querySelectorAll('.user-menu-trigger');

            userMenuTriggers.forEach(trigger => {
                const userDropdownMenu = trigger.nextElementSibling;

                // 点击用户头像或名称时切换下拉菜单显示状态
                trigger.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    userDropdownMenu.classList.toggle('active');
                });
            });

            // 点击页面其他地方关闭所有下拉菜单
            document.addEventListener('click', function() {
                document.querySelectorAll('.user-dropdown-menu').forEach(menu => {
                    menu.classList.remove('active');
                });
            });

            // 防止点击下拉菜单内部时关闭菜单
            document.querySelectorAll('.user-dropdown-menu').forEach(menu => {
                menu.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
    // 筛选功能实现
    const filterElements = {
        priceSelect: document.querySelector('select'),
        checkboxes: document.querySelectorAll('input[type="checkbox"]'),
        applyButton: document.querySelector('.batik-btn'),
        categoryLinks: document.querySelectorAll('.category-link'),
        contentSections: document.querySelectorAll('.content-section'),
        attractions: document.querySelectorAll('.wooden-card:not(.mt-6)') // 排除广告卡片
    };

    // 存储当前筛选条件
    let currentFilters = {
        category: 'popular',
        price: '全部价格',
        types: [],
        regions: []
    };

    // 切换分类显示
    filterElements.categoryLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // 更新活跃状态
            filterElements.categoryLinks.forEach(l => l.classList.remove('nav-active'));
            this.classList.add('nav-active');

            // 更新当前分类
            currentFilters.category = this.getAttribute('data-category');

            // 显示对应内容区域
            filterElements.contentSections.forEach(section => {
                section.classList.remove('active');
            });
            document.getElementById(`${currentFilters.category}-content`).classList.add('active');

            // 应用筛选
            applyFilters();
        });
    });

    // 监听价格选择变化
    filterElements.priceSelect.addEventListener('change', function() {
        currentFilters.price = this.value;
    });

    // 监听复选框变化
    filterElements.checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const parentLabel = this.parentElement.textContent.trim();

            // 判断是类型还是地区
            if (['自然风光', '历史古迹', '民族村寨', '文化体验'].includes(parentLabel)) {
                updateFilterArray(currentFilters.types, parentLabel, this.checked);
            } else {
                updateFilterArray(currentFilters.regions, parentLabel, this.checked);
            }
        });
    });

    // 应用筛选按钮点击事件
    filterElements.applyButton.addEventListener('click', applyFilters);

    // 辅助函数：更新筛选数组
    function updateFilterArray(array, value, checked) {
        if (checked && !array.includes(value)) {
            array.push(value);
        } else if (!checked && array.includes(value)) {
            array.splice(array.indexOf(value), 1);
        }
    }

    // 应用所有筛选条件
    function applyFilters() {
        // 获取当前活跃的内容区域
        const activeSection = document.querySelector('.content-section.active');
        const visibleAttractions = activeSection.querySelectorAll('.wooden-card:not(.mt-6)');

        visibleAttractions.forEach(attraction => {
            // 获取景点信息
            const priceText = attraction.querySelector('.price-tag')?.textContent || '';
            const price = parseFloat(priceText.replace(/[^\d]/g, '')) || 0;
            const typeText = attraction.querySelector('.fa-tag + span')?.textContent || '';
            const regionText = attraction.querySelector('.fa-map-marker + span')?.textContent || '';

            // 价格筛选逻辑
            let priceMatch = true;
            if (currentFilters.price === '0-100元') {
                priceMatch = price >= 0 && price <= 100;
            } else if (currentFilters.price === '100-200元') {
                priceMatch = price > 100 && price <= 200;
            } else if (currentFilters.price === '200-500元') {
                priceMatch = price > 200 && price <= 500;
            } else if (currentFilters.price === '500元以上') {
                priceMatch = price > 500;
            }

            // 类型筛选逻辑
            const typeMatch = currentFilters.types.length === 0 ||
                             currentFilters.types.some(type => typeText.includes(type));

            // 地区筛选逻辑
            const regionMatch = currentFilters.regions.length === 0 ||
                              currentFilters.regions.some(region => regionText.includes(region));

            // 应用筛选结果
            if (priceMatch && typeMatch && regionMatch) {
                attraction.style.display = '';
            } else {
                attraction.style.display = 'none';
            }
        });

        // 显示筛选结果提示
        showFilterResult(visibleAttractions);
    }

    // 显示筛选结果提示
    function showFilterResult(attractions) {
        // 移除已存在的结果提示
        const existingResult = document.querySelector('.filter-result');
        if (existingResult) {
            existingResult.remove();
        }

        // 计算可见景点数量
        const visibleCount = Array.from(attractions).filter(a => a.style.display !== 'none').length;

        // 创建并添加结果提示
        const resultDiv = document.createElement('div');
        resultDiv.className = 'filter-result bg-light p-3 rounded-md text-center text-sm mt-4';
        resultDiv.textContent = `找到 ${visibleCount} 个符合条件的景点`;

        const activeSection = document.querySelector('.content-section.active');
        activeSection.appendChild(resultDiv);

        // 3秒后自动隐藏结果提示
        setTimeout(() => {
            resultDiv.style.opacity = '0';
            resultDiv.style.transition = 'opacity 0.5s';
            setTimeout(() => resultDiv.remove(), 500);
        }, 3000);
    }
});
    </script>
</body>
</html>